<template>
  <div class="login-container">
    <div>
      <h2 class="title">{{ title }}</h2>
    </div>
    <div class="iptbox">
      <img src="@/assets/img/icon_dl_sjh.png" class="ipticon1">
      <input placeholder="请输入手机号" class="ipt" type="number" v-model="phone">
    </div>
    <div class="iptbox">
      <img src="@/assets/img/icon_dl_mm.png" class="ipticon2">
      <input placeholder="请输入登录密码" class="ipt" type="password" v-model="password">
    </div>
    <div class="bbox">
      <span class="register" @click="toregister">注冊</span>
      <span class="reset" @click="tofind">忘记密码</span>
    </div>
    <div class="loginbtn" @click="loginbtn">登录</div>
    <div class="login-other">
      <div class="other-tip">
        <span class="login-border"></span>其他方式登录
        <span class="login-border"></span>
      </div>
      <div class="other-qq">
<!--         <div style="padding-left:30px;" class="other-model">-->
<!--          <img class="other-img" src="@/assets/img/img_qq.png" alt>-->
<!--          <br>-->
<!--          <span>Q Q</span>-->
<!--        </div>-->
        <div class="other-model" @click="weixinlogin">
          <img class="other-img" src="@/assets/img/img_wx.png" alt>
          <br>
          <span>微信</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// import Qs from 'qs'
export default {
  data() {
    return {
      phone: null,
      password: null,
      title: "登录"
    };
  },
  created(){
	this.go_user();
  },
  methods: {
    weixinlogin() {
      let that = this
      dsBridge.call("third_party_login", 5);
      dsBridge.register("addWX", function(data) {
        let str = JSON.parse(data)
         var Sukdata = {
          wx_id:str.openid,
          name:str.name,
          head:str.iconurl
        };
        that.axios
          .post(that.baseUrl + "/user/oppidlogin", that.Qs.stringify(Sukdata), {
            headers: {
              "Content-Type": "application/x-www-form-urlencoded"
            }
          })
          .then(function(res) {
            if (res.request.status === 200) {
              if (res.data.meta.code == 200) {
                // alert(123)
                localStorage.setItem("userid", res.data.data.id);
                if(localStorage.getItem('userid')){
                  that.$router.push({
                  name:'user'
                })
                }

                // localStorage.setItem("phone", res.data.data.phone);
              } else if (res.data.meta.code == 501) {
              }
            }
          });

      });
    },
    // loginweixin(){
    //   let that = this
    //     // alert(str.openid)
    //     // JSON.stringify(data)
    //     // that.$toast.loading({
    //     //   message: "加载中..."
    //     // });

    //     alert(123)
    //     var Sukdata = {
    //       wx_id:123564,
    //       name:51196196,
    //       head:56196156
    //     };
    //     alert(str.openid)
    //     that.axios
    //       .post(that.baseUrl + "/user/oppidlogin", that.Qs.stringify(Sukdata), {
    //         headers: {
    //           "Content-Type": "application/x-www-form-urlencoded"
    //         }
    //       })
    //       .then(function(res) {
    //         if (res.request.status === 200) {
    //           if (res.data.meta.code == 200) {
    //             alert(123)
    //             localStorage.setItem("userid", res.data.data.id);
    //             localStorage.setItem("phone", res.data.data.phone);
    //           } else if (res.data.meta.code == 501) {
    //           }
    //         }
    //       });
    // },
    loginbtn() {
      let that = this;
      let myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
      if (!myreg.test(that.phone)) {
        that.$toast({
          message: "请输入正确手机号"
        });
        return false;
      } else {
        that.$toast.loading("加载中...");
        let Sukdata = {
          phone: that.phone, //`手机号`
          password: that.password //`密码`
        };
        // console.log(obj)
        that.axios
          .post(that.baseUrl + "/user/login", that.Qs.stringify(Sukdata), {
            headers: {
              "Content-Type": "application/x-www-form-urlencoded"
            }
          })
          .then(function(res) {
            if (res.request.status === 200) {
//            console.log(res.data);
              if (res.data.meta.code == 200) {
                localStorage.setItem("userid", res.data.data.id);
                localStorage.setItem("phone", res.data.data.phone);
                that.$toast.success({
                  message: "登陆成功！"
                });
                localStorage.setItem('firstlogin','yes')
                that.$router.push({
                  name: "user"
                });
              } else if (res.data.meta.code == 501) {
                that.$toast({
                  message: res.data.meta.msg
                });
              }
            }
          });

        // let obj = {}
        // that.axios.post(this.baseUrl + "/user/login", (obj), {
        //   headers: {
        //     "Content-Type": "application/x-www-form-urlencoded"
        //   }
        // }).then(function(res) {
        //   if (res.data.meta.code == 200) {
        //     alert("注册成功");
        //     that.$router.push({ path: "/login" });
        //   } else {
        //     alert(res.data.meta.msg);
        //     that.$router.push({ path: "/login" });
        //   }
        //   // if( )
        // });
      }
    },
    toregister() {
      this.$router.push({
        name: "register"
      });
    },
    tofind() {
      this.$router.push({
        name: "findpassword"
      });
    },
    go_user(){
    	var that = this;
    	that.userid = localStorage.getItem('userid');
    	if (that.userid == null || that.userid == '') {

    	} else{
    		that.$router.push({
          name: "user"
        });
    	}
    	console.log(that.userid)
    }
  }
};
</script>
<style scoped>
.login-other {
  margin-top: 150px;
}
.loginbtn {
  width: 80%;
  margin-top: 15px;
  text-align: center;
  background: #ff2f4e;
  margin: 25px auto;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  border-radius: 8px;
}
.other-model {
  margin-top: 30px;
  text-align: center;
}
.other-qq {
  display: flex;

  justify-content: center;
}
.other-img {
  width: 40%;
  margin-bottom: 10px;
}
.other-tip {
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
  align-items: center;
  color: #8a8a8a;
}
.login-border {
  display: inline-block;
  height: 0;
  width: 34%;
  border-bottom: #e3e3e3 solid 1px;
}
.login-container {
  font-size: 0.3rem;
  height: 100%;
  width: 100%;
}
.title {
  padding-top: 20px;
}
.ipticon1 {
  width: 13px;
  height: 20px;

  vertical-align: middle;
  margin-left: 17px;
}
.iptbox {
  width: 90%;
  /* height: 6%; */
  /* display: flex; */
  align-items: center;
  border: 1px solid #dcdcdc;
  border-radius: 20px;
  margin: 20px auto;
  text-align: left;
}
.ipticon2 {
  width: 16px;
  margin-left: 17px;
  height: 20px;
  vertical-align: middle;
}
.ipt {
  border: none;
  color: #8a8a8a;
  height: 35px;
  margin-left: 12px;
}
h2 {
  text-align: center;
}
.bbox {
  width: 90%;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  color: #ff2f4e;
}
</style>
